<style scoped>
</style>
<template>
  <van-popup v-model:show="is_show" round position="bottom" safe-area-inset-bottom teleport="body">
    <van-picker v-model="value_arr" :title="title" :columns-field-names="{text:'content'}" :columns="columns" @cancel="close" @confirm="submit" >
      <template #option="data" v-if="$slots.option">
        <slot name="option" v-bind="data"></slot>
      </template>
    </van-picker>
  </van-popup>
</template>

<script>
import s94Mjs from "s94-js";
import {decode_config, s94_event} from "@/js/s94_tool.js";
import {reactive} from "vue";

const _this = reactive({
  is_show: false,
  callback(){},
  cancel(){},

  title: '请选择',
  config: [],
  value: '',

  columns: [],
  value_arr: [],
  option_arr: [],
})

/**
 * @param {string|array|object} config
 * @param value
 * @param title
 * @returns {Promise<unknown>}
 */
export function select_option(config, value, title){
  _this.title = title || '请选择';
  _this.config = config || [];
  _this.value = value;

  let options = decode_config(_this.config);
  let val = s94Mjs.to_string(_this.value);
  _this.value_arr = [];
  _this.option_arr = [];

  let indexs = [];
  s94Mjs.eachloop(options, 'children', (row,k,obj,ks)=>{
    if (row.children && row.children.length) return true;
    if (row.value === val){
      indexs = ks;
      return false;
    }
  })
  let cache = options;
  indexs.forEach((i)=>{
    _this.value_arr.push(cache[i].value)
    _this.option_arr.push(cache[i]);
    cache = cache[i].children;
  })

  // 保持选项的深度一致，确定 columns 配置
  let max_layer = 0; //选项最大层级
  s94Mjs.eachloop(options, 'children', (row,k,obj,ks)=>{
    if (row.children && row.children.length) return true;
    max_layer = Math.max(max_layer, ks.length);
    return true;
  })
  s94Mjs.eachloop(options, 'children', (row,k,obj,ks)=>{
    if (row.children && row.children.length) return true;
    let add_layer = max_layer - ks.length;
    let children = "";
    for (let i = 0; i < add_layer; i++) {
      children = children ? [{content:"",value:undefined,children:children}] : [{content:"",value:undefined}];
    }
    if (children) row.children = children;
  })
  _this.columns = options;

  _this.is_show = true;
  return new Promise((resolve, reject)=>{
    _this.callback = resolve;
    _this.cancel = reject;
  })
}
select_option._this = _this;
select_option.hide = function(){
  _this.is_show = false;
}

s94_event('router.after', ()=>{
  _this.is_show = false;
})

export default {
  props: {},
  emits: ['submit'],
  data(){
    return _this
  },
  methods: {
    submit(picker_data){
      this.option_arr = picker_data.selectedOptions;
      let value_arr = picker_data.selectedValues;
      // 抛弃最后面的 undefined 的值，这是保持选项的深度添加的空白选项
      while (value_arr.length>0 && typeof value_arr[value_arr.length-1]=== 'undefined'){
        value_arr.pop();
      }
      this.value = value_arr[value_arr.length-1];
      this.value_arr = value_arr;

      this.is_show = false;
      this.callback(this.value);
    },
    close(){
      this.is_show = false;
    }
  },
  mounted() {

  }
}
</script>